<template>
  <view class="basic tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

	<view class="space_top"></view>

	
  <view class="flex00 tn-margin-top-sm">
	<view class="flex-2 ">
	  <view v-for="item in cates" @tap="trunSpaceCate(item.id)" class="tn-radius10 width-2  heightSmall" :style="{ backgroundImage: 'url(' + item.image + ');' }"></view>
	</view>
  </view>

  <view class="search-box tn-pl-sm tn-pr-lg bottom-search" @click="search()">
  	<text class="tn-icon-search icon"></text>
  	<text class="tn-pl-sm" style="color: #c8c9cc;">搜索</text>
  </view>
  
  
  <view class="tn-margin-top" v-for="item in cates">
	<view class="main_title mentor_title">
		<span>{{item.name}}</span>
		<span class="tn-float-right" @tap="trunSpaceCate(item.id)">查看全部 >></span>
	</view>
	<view v-for="space in item.space" class="space_list tn-margin-top-sm" @tap="detail(space.id)" >
		<view class="logo" :style="{ backgroundImage: 'url(' + space.pic + ');'}"></view>
		<view class="title">{{space.title}}</view>
		<view class="location"><i class="tn-icon-location icons"></i>{{space.address}}</view>
		<view class="desc tn-text-left">
			<span>布芒的家·生活空间</span>
			<span class="tn-float-right">营业时间：{{space.start_time}}-{{space.end_time}}</span>
		</view>
		
		<view class="footer">
			<view class="price">￥{{space.price}}/天起</view>
			<view class="order-btn">立即预约</view>
		</view>
	</view>
  </view>
  <TemplateLoading :active="loading"></TemplateLoading>
  <view class="tn-padding-bottom-xs"></view>

  </view>
</template>

<script>
  import {indexObj} from '@/api/space/index.js'
  import TemplateLoading from '../components/loading.vue'
  export default {
    name: 'spaceIndex',
	components:{TemplateLoading},
   
    data() {
      return {
		swiperHeight:146,
		cates: [],
		loading:false,
      }
    },
	mounted() {
		this.initData()
	},
    methods: {
		trunSpaceCate(cateId){
			uni.navigateTo({
			  url: '/pages/space/list?cate_id='+cateId
			})
		},
	  detail(id){
		uni.navigateTo({
		  url: '/pages/space/detail?id='+id
		})
	  },
      getRandomCoolBg() {
        return this.$tn.color.getRandomCoolBgClass()
      },
	  search(){
		  uni.navigateTo({
		    url: '/pages/search/search?type=1'
		  })
	  },
	  initData(){
		  this.loading = true
		  indexObj().then(res=>{
			  this.cates = res
			  this.loading =false
		  },err=>{
			  this.loading = false
		  })
	  }
    }
  }
</script>

<style lang="scss" scoped>
	.basic{
		font-family: "PingFangSCRegular";
		.submit-btn {
		  width: 100%;
		  background-color: $tn-main-orange;
		  color: #FFFFFF;
		  line-height: 105rpx;
		  font-size: 30rpx;
		  margin-top: 31rpx;
		}
	}
	.main_title{
		color: #FFFFFF;
		text-align: left;
		margin-top: 30rpx;
		font-size: 24rpx;
		font-weight: bold;
	}
	.mentor_title{color: $tn-main-orange;}
	.tn-radius10{border-radius: 10rpx;}
	.heightSmall{height: 125rpx;background-size: contain;background-repeat: no-repeat;margin-bottom: 16rpx;}

	.width-2{width: 47%;}
	.flex-2{
		justify-content: space-between;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.search-box{
		height: 54rpx;
		width:100%; 
		background-color: #e5f3f9;
		//border:1px solid #FFF;
		border-radius: 27rpx;
		line-height: 54rpx;
		color: $tn-main-orange;
		font-size: 24rpx;
		padding: 0 10px;
		margin-top: 31rpx;
		.icon{
			font-size: 16px;
			margin-right: 5px;
			font-weight: bold;
		}
	}

  
  .space_top{
	  background: url("https://www.zztengma.com/lihu/bumang/images/space_index.png") no-repeat  ;
	  background-position: left bottom; 
	  height: 177rpx;
	  background-size: contain;
  }
  
  .space_list{
	  background: #FFFFFF;
	  border-radius: 10rpx;
	  padding: 13rpx 18rpx;
	  float: unset;
	  overflow: hidden;
	  
	  .logo{
		  background: url("https://www.zztengma.com/lihu/bumang/images/space_image.png") no-repeat  ;
		  background-size: contain;
		  width: 100%;
		  height: 298rpx;
	  }
	  
	  .title{font-size: 36rpx;color:#333333;font-weight: bold;margin: 30rpx 0;}
	  .location,.desc{font-size: 24rpx;color: #333333;font-weight: bold;}
	  .location{
		  .icons{
			  display: inline;
			  width: 24px;
			  height: 24px;
			  margin-right: 7rpx;
		  }
	  }
	  .desc{margin: 16rpx 0;font-size: 18rpx;}
	  .footer{
		  padding-top: 16rpx;
		  border-top: 1px solid #c8c8c8;
		  display: flex;justify-content: space-between;
		  .price{color: $tn-main-orange;font-weight: bold;font-size: 36rpx;}
		  .order-btn{
			  background:$tn-main-orange;color: #FFFFFF;padding: 0 1px;border-radius: 10rpx;font-size: 30rpx;
			  
				height: 46rpx;
				line-height: 46rpx;
				
			  }
	  }
	  
  }
</style>
